<template>
  <ModelTile
    class="projectSite"
    title="项目现场"
    @onMore="onMore"
    :is-download="false"
    :is-more="false"
  >
    <z-input-search v-model:value="value" placeholder="请输入工程名称" @onSearch="onSearch" />
    <div class="projectSiteContent scrollbar">
      <div class="imageList">
        <div class="imageItem" v-for="item in 20" :key="item">
          <img :src="getImage('icon_no_img')" />
        </div>
      </div>
    </div>
  </ModelTile>
</template>

<script lang="ts">
import { ref, defineComponent, computed } from 'vue'
import ModelTile from '@/components/modleTitle/index.vue'
import ZInputSearch from '@/components/z-input-search/index.vue'
export default defineComponent({
  name: 'csgx',
  components: {
    ModelTile,
    ZInputSearch
  },
  props: {
    // 父级统计数据
    statAllData: {
      type: Object,
      default: {}
    }
  },
  setup(props) {
    const listData = computed(() => [
      { name: '旧厂', completed: '实际完成投资10亿' },
      { name: '建安投资', completed: '实际完成投资8亿' },
      { name: '建设', completed: '实际完成投资6亿' }
    ])

    const value = ref<string>('')

    const onSearch = (searchValue: string) => {
      console.log('use value', searchValue)
    }

    // 获取icon
    function getImage(name: string) {
      return new URL(`/src/assets/images/globalCommon/${name}.png`, import.meta.url).href
    }
    // 跳转页面
    function onMore() {
      console.log('跳转页面')
    }
    return {
      onMore,
      getImage,
      listData,
      value,
      onSearch
    }
  }
})
</script>

<style lang="scss" scoped>
.projectSite {
  height: 100%;
  color: #fff;
  margin-top: 100vh * $Bh;

  .projectSiteContent {
    height: 100%;
  }

  :deep(.content) {
    width: 100%;
    margin-top: 38vh * $Bh;
    height: 666vh * $Bh;
    background-color: initial;
    border-radius: 0;
    padding: 0;
    .imageList {
      .imageItem {
        width: 31%;
        height: 264vh * $Bh;
        border: 2vw * $Bw solid #3886f2;
        float: left;
        margin-right: 15vw * $Bw;
        margin-top: 40vh * $Bh;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
